<template>
    <div>
        <div class="wel__header">
            <div class="wel__info">
                <img :src="$store.getters.userInfo.avatar" alt="" class="wel__info-img">
                <div class="wel__info-content">
                    <div class="wel__info-title">
                        {{welinfo}}{{$store.getters.userInfo.realname}}
                        
                    </div>
                    <div class="wel__info-subtitle">
                        {{ nowDate + ' ' + nowTime + ' ' + nowWeek }}
                    </div>
                </div>
            </div>
            <div class="wel__extra" v-if="$store.state.user.userInfo.user_type === 2">
                <div class="wel__extra-item">
                    <p class="wel__extra-title">成单量</p>
                    <p class="wel__extra-subtitle">{{jobBusInfo.completed}}</p>
                </div>
                <div class="wel__extra-item">
                    <p class="wel__extra-title">录单量</p>
                    <p class="wel__extra-subtitle">{{jobBusInfo.created}}</p>
                </div>
                <div class="wel__extra-item">
                    <p class="wel__extra-title">成单率</p>
                    <p class="wel__extra-subtitle">{{jobBusInfo.completedratio}}</p>
                </div>
                <div class="wel__extra-item">
                    <p class="wel__extra-title">公司排名</p>
                    <p class="wel__extra-subtitle">
                        {{jobBusInfo.top}} <span>/ {{jobBusInfo.topcount}}</span>
                    </p>
                </div>
            </div>
        </div>
        <basic-container>
            <el-radio-group v-model="flowcheck" @change="handleFlowCheckRadios">
                <el-radio :label="0">全部</el-radio>
                <el-radio v-for="(item,index) in flowData" :key="index" :label="item.flowId">{{item.flowName}}</el-radio>
            </el-radio-group>
        </basic-container>
        <basic-container v-if="$store.state.user.permission.analysis_total">
            <avue-data-box :option="jobTotal"></avue-data-box>
            <charts class="chart" :options="jobTotalCharts"></charts>
        </basic-container>

        <el-row :span="24">
            <el-col :span="12">
                <basic-container v-if="$store.state.user.permission.analysis_date">
                    <avue-data-icons :option="jobDateTotal"></avue-data-icons>
                    <charts class="chart" :options="jobDateTotalCharts"></charts>
                </basic-container>
            </el-col>
            <el-col :span="12">
                <basic-container v-if="$store.state.user.permission.analysis_trans">
                    <avue-data-progress :option="jobTransRatio" style="margin-bottom:20px"></avue-data-progress>
                    <charts class="chart" :options="jobTransRatioCharts"></charts>
                </basic-container>
            </el-col>
        </el-row>
        <basic-container v-if="jobTopBusman.data.length > 0 && $store.state.user.permission.analysis_top">
            <avue-data-card :option="jobTopBusman"></avue-data-card>
        </basic-container>
        <!-- 流程节点数据分析-->
        <basic-container v-if="jobTopBusman.data.length > 0 && $store.state.user.permission.analysis_workflow">
            <avue-data-pay :option="jobWorkFlowNodeOption"></avue-data-pay>
        </basic-container>
    </div>
</template>

<script>
    import {
        api
    } from "@/api/common";
    export default {
        name: "analysis",
        data() {
            return {
                welinfo: '',
                nowDate: "",
                nowTime: "",
                nowWeek: "",
                flowcheck: 0,
                flowData: [],
                jobTotal: {
                    span: 6,
                    data: []
                },
                jobTotalCharts: {
                    title: {
                        text: '业务量统计'
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: [{
                        title: {
                            text: '订单数'
                        },
                    }],
                    plotOptions: {
                        series: {
                            stacking: 'normal'
                        }
                    },
                    series: []
                },
                jobDateTotal: {
                    span: 3,
                    data: []
                },
                jobDateTotalCharts: {
                    title: {
                        text: '今日、本周、当月、年度统计'
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: [{
                        title: {
                            text: '订单数'
                        },
                    }],
                    plotOptions: {
                        series: {
                            stacking: 'normal'
                        }
                    },
                    series: []
                },
                
                jobTopBusman: {
                    span: 4,
                    data: []
                },
                jobTransRatio: {
                    span: 8,
                    data: []
                },
                jobTransRatioCharts: {
                    title: {
                        text: '今日、本周、当月、年度同比新增率'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y:.2f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.y:.2f} %'
                            }
                        }
                    },
                    series: []
                },
                jobBusInfo: {
                    completed: 0,
                    created: 0,
                    completedratio: '0.00%',
                    top: 0,
                    topcount: 0
                },
                jobWorkFlowNodeOption: {},
            };
        },
        mounted() {
            this.currentTime();
            this.getWorkFlowData();
        },
        beforeDestroy: function() {
            if (this.getDate) {
                clearInterval(this.getDate);
            }
        },
        created() {
            this.getWorkFlowAnalysis()
        },
        methods: {
            handleFlowCheckRadios(val) {
                this.flowcheck = val
                this.getWorkFlowAnalysis()
            },
            getWorkFlowData() {
                let _this = this
                _this.axios.post(api.getWorkFlowByBelongForEnabled, {}).then((res) => {
                    if (res.data.code == 10000) {
                        _this.flowData = res.data.data
                    } else {
                        _this.flowData = []
                    }
                }).catch((err) => {
                    console.log(err)
                })
            },
            getWorkFlowAnalysis() {
                let _this = this
                _this.axios.post(api.getWorkFlowAnalysis, {
                    flowId: _this.flowcheck,
                }).then((res) => {
                    if (res.data.code == 10000) {
                        _this.jobTotal.data = res.data.data.jobTotal
                        _this.jobTotalCharts.xAxis.categories = res.data.data.jobTotalCategories
                        _this.jobTotalCharts.series = res.data.data.jobTotalSeriesData
                        _this.jobDateTotal.data = res.data.data.jobDateTotal
                        _this.jobDateTotalCharts.xAxis.categories = res.data.data.jobDateTotalCategories
                        _this.jobDateTotalCharts.series = res.data.data.jobDateTotalSeriesData
                        _this.jobTopBusman.data = res.data.data.jobTopBusman
                        _this.jobTransRatio.data = res.data.data.jobTransRatio
                        _this.jobTransRatioCharts.series = res.data.data.jobTransRatioSeriesData
                        _this.jobBusInfo = res.data.data.jobBusInfo
                        _this.getJobWorkFlowNodeAnalysis()
                    } else {
                        _this.jobTotal.data = []
                        _this.jobTotalCharts.xAxis.categories = []
                        _this.jobTotalCharts.series = []
                        _this.jobDateTotal.data = []
                        _this.jobDateTotalCharts.xAxis.categories = []
                        _this.jobDateTotalCharts.series = []
                        _this.jobTopBusman.data = []
                        _this.jobTransRatio.data = []
                        _this.jobTransRatioCharts.series = []
                    }
                }).catch((err) => {
                    console.log(err)
                })
            },
            getJobWorkFlowNodeAnalysis() {
                let _this = this
                _this.axios.post(api.getJobWorkFlowNodeAnalysis, {
                    flowId: _this.flowcheck,
                }).then((res) => {
                    if (res.data.code == 10000) {
                        _this.jobWorkFlowNodeOption = res.data.data
                    } else {
                        _this.jobWorkFlowNodeOption = {}
                    }
                }).catch((err) => {
                    console.log(err)
                })
            },
            currentTime() {
                setInterval(this.getDate, 500);
            },
            getDate: function() {
                var _this = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth() + 1;
                let dd = new Date().getDate();
                let week = new Date().getDay();
                let hh = new Date().getHours();
                let mf =
                    new Date().getMinutes() < 10
                        ? "0" + new Date().getMinutes()
                        : new Date().getMinutes();
                if (week == 1) {
                    this.nowWeek = "星期一";
                } else if (week == 2) {
                    this.nowWeek = "星期二";
                } else if (week == 3) {
                    this.nowWeek = "星期三";
                } else if (week == 4) {
                    this.nowWeek = "星期四";
                } else if (week == 5) {
                    this.nowWeek = "星期五";
                } else if (week == 6) {
                    this.nowWeek = "星期六";
                } else {
                    this.nowWeek = "星期日";
                }
                _this.nowTime = hh + ":" + mf;
                _this.nowDate = yy + "/" + mm + "/" + dd;
                if (hh > 0 && hh < 6) {
                    _this.welinfo = '夜深了，';
                } else if (hh > 6 && hh < 12) {
                    _this.welinfo = '上午好，';
                } else if (hh > 12 && hh < 18) {
                    _this.welinfo = '下午好，';
                } else if (hh > 18 && hh < 24) {
                    _this.welinfo = '晚上好，';
                }
            }
        }
    };
</script>

<style scoped="scoped" lang="scss">
    .wel {
        &__header {
            padding: 25px 40px;
            border-bottom: 1px solid #e8e8e8;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        &__info {
            display: flex;
            align-items: center;

            &-img {
                border-radius: 72px;
                display: block;
                width: 72px;
                height: 72px;

                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            &-content {
                position: relative;
                margin-left: 24px;
                color: rgba(0, 0, 0, 0.45);
                line-height: 22px;
            }

            &-title {
                font-size: 20px;
                line-height: 28px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
                margin-bottom: 12px;
            }

            &-subtitle {
                position: relative;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.45);
                line-height: 22px;
            }
        }

        &__extra {
            &-item {
                position: relative;
                padding: 0 32px;
                display: inline-block;

                &:last-child {
                    &::after {
                        display: none;
                    }
                }

                &:after {
                    background-color: #e8e8e8;
                    position: absolute;
                    top: 30px;
                    right: 0;
                    width: 1px;
                    height: 40px;
                    content: "";
                }
            }

            &-title {
                color: rgba(0, 0, 0, 0.45);
                font-size: 14px;
                line-height: 22px;
                margin-bottom: 4px;
            }

            &-subtitle {
                color: rgba(0, 0, 0, 0.85);
                font-size: 30px;
                line-height: 38px;
                margin: 0;

                span {
                    color: rgba(0, 0, 0, 0.45);
                    font-size: 20px;
                }
            }
        }
    }
</style>
